import Taro, {Component, useState} from '@tarojs/taro'
import {Button, Text, View} from '@tarojs/components'
import { CounterContext } from './counter-context.js'
import { ThemeContext } from './theme-context'
import { UserContext } from './user-context.js'
import Child from "./child";
import Content from "./content";

export default class Xhl6 extends Component {
  config = {
    navigationBarTitleText: 'Context'
  }

  render() {
    const [ count, setCount ] = useState(0)
    const theme = 'bord';
    const signedInUser = {
      name: 'Blud',
    };
    return (

        <View>
          <View>1. 目前版本无法使用 getChildContext() API</View>
          <View>2. API</View>
          <View>Taro.createContext</View>
          <View>创建一个 Context 对象。当 Taro 渲染一个订阅了这个 Context 对象的组件，这个组件会从最先渲染的 Provider 中读取到 Provider 的 value。</View>
          <View>在 Taro 中，即便在框架层面也无法知道组件的树结构，因此 Taro 无法像 React 一样往父组件找离自己最近的 Provider。因此创建的 Context 最好只在一个地方使用。</View>
          <View>Context.Provider</View>
          <View>每个 Context 对象都会返回一个 Provider Taro 组件，它允许消费组件订阅 context 的变化。</View>
          <View>Provider 及其内部包含 contextType 或使用 useContext 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。</View>
          <View>Class.contextType</View>
          <View>挂载在 class 上的 contextType 属性会被重赋值为一个由 Taro.createContext() 创建的 Context 对象。</View>
          <View>这能让你使用 this.context 来消费 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中。</View>

          <View>3. 测试动态 Context</View>
          <CounterContext.Provider value={count}>
            <Button onClick={() => setCount(0)}>Reset</Button>
            <Button onClick={() => setCount(prevCount => prevCount + 1)}>+</Button>
            <Button onClick={() => setCount(prevCount => prevCount - 1)}>-</Button>
            <Child />
          </CounterContext.Provider>

          <View>4. 消费多个 Context</View>

          <ThemeContext.Provider value={theme}>
            <UserContext.Provider value={signedInUser}>
              <Text>{signedInUser.name} </Text>
              <Text>{theme}</Text>
              <Content />
            </UserContext.Provider>
          </ThemeContext.Provider>
        </View>

    )
  }
}
